<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">项目实施模板</div>
			<div class="flexbox">
				<div class="per_left">
					<div class="pre_list">
						<div class="fr">
							<div class="list_btns list_btn_add" @click="showmbadd=true;ppname='';mbid=''"
								v-if="$permissions.indexOf(177)  != -1">
								<img src="@assets/images/addfen.png" alt="">添加
							</div>
						</div>
						<div :class="act == index?'per_li act':'per_li'" v-for="item,index in leftlist"
							@click="chose(index)">
							<div class="per_li_l">
								<img src="@assets/images/xmed.png" v-if="act == index" alt="">
								<img src="@assets/images/xm.png" v-else alt="">

								<div class="xmname">{{item.name}}</div>
							</div>
							<div class="perr">
								<img src="@assets/images/xmedit2.png" alt=""
									@click="mbid=item.id;ppname=item.name;showmbadd=true"
									v-if="$permissions.indexOf(179)  != -1">
								<img src="@assets/images/del.png" alt="" @click="mbid=item.id;delmb=true"
									v-if="$permissions.indexOf(180)  != -1">
							</div>

						</div>
					</div>
				</div>
				<div class="xmright">
					<div class="search_box">
						<div class="add_btn sear_btns" style="margin-bottom: 20px;" @click="openaddjd"
							v-if="$permissions.indexOf(177)  != -1">
							<img src="@assets/images/add.png" alt="">
							添加阶段
						</div>

						<div class="smadd_btn sear_btns" style="margin-bottom: 20px;" @click="showadd=true"
							v-if="$permissions.indexOf(177)  != -1">
							<img src="@assets/images/xmadd.png" alt="">
							添加任务
						</div>
					</div>
					<div class="table-responsive mt-20">
						<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>

						<div class="xmlist" v-for="item,index in list">
							<div class="list_title">
								<div class="list_title_l">
									第 <span>{{index+1}}</span> 步
									<strong>{{item.name}}</strong>
								</div>
								<div class="list_title_r">
									<div class="list_btns list_btn_add" @click="xmStage=item.id;showadd=true"
										v-if="$permissions.indexOf(177)  != -1">
										<img src="@assets/images/addfen.png" alt="">添加
									</div>
									<div class="list_btns list_btn_edit" @click="editjd(index)"
										v-if="$permissions.indexOf(179)  != -1">
										<img src="@assets/images/xmedit.png" alt="">编辑
									</div>
									<div class="list_btns list_btn_del" @click="id=item.id;delshow=true"
										v-if="$permissions.indexOf(180)  != -1">
										<img src="@assets/images/del.png" alt="">删除
									</div>
									<img src="@assets/images/xmup.png" class="up" alt="" @click="opendown(index)"
										:style="item.open?'':'transform: rotateZ(180deg);'">
								</div>
							</div>

							<div class="rwlist" v-for="item2,index2 in item.arr" v-if="item.open">
								<div class="rwlist_l">
									<div class="cur">●</div>
									<div>{{item2.rwName}}</div>
								</div>
								<div class="rwlist_r">
									<div class="list_btns list_btn_del2" @click="edit(index,index2)"
										v-if="$permissions.indexOf(179)  != -1">
										<img src="@assets/images/xmedit2.png" alt="">编辑
									</div>
									<div class="list_btns list_btn_del2" @click="id=item2.id;delrwshow=true"
										v-if="$permissions.indexOf(180)  != -1">
										<img src="@assets/images/del.png" alt="">删除
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<!-- 删除任务模板 -->
		<div class="alzzc" v-if="delrwshow">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除任务模板
					<div class="right" @click="id='';delrwshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该任务模板？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delrw">确认</div>
					<div class="alert_close" @click="id='';delrwshow=false">取消</div>
				</div>
			</div>
		</div>
		<!--新增模板-->
		<div :class="showmbadd?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showmbadd?'display: block;z-index:199;':'z-index:199;'">
			<div class="cent w600" style="justify-content: center;width: 450px !important;height: 262px">
				<div class="modal-dialog" role="document" style="width: 100%;height: 262px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{mbid?'编辑模板':'新建模板'}}
							<div class="right" @click="showmbadd=false;">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 144px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left" style="width: 100%;justify-content: center;">
										<label class="subl" style="width: auto;"><em class="red">*</em>模板名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="ppname"
												placeholder="输入模板名称">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addmb">确定</button>
							<button class="btn btn-info close_eng" @click="showmbadd=false">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 删除模板 -->
		<div class="alzzc" v-if="delmb">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除模板
					<div class="right" @click="mbid='';delmb=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该模板？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delmodel">确认</div>
					<div class="alert_close" @click="id='';delmb=false">取消</div>
				</div>
			</div>
		</div>
		<!--新增任务-->
		<div :class="showadd?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showadd?'display: block;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;margin: 50px auto;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 680px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{info.id?'编辑任务模板':'新建任务模板'}}
							<div class="right" @click="closerw">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 558px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl">任务名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="info.rwName"
												placeholder="输入任务名称">
										</div>
									</div>
									<div class="subli_left" v-if="!xmStage">
										<label class="subl"><em class="red">*</em>所属阶段</label>
										<div class="input-cont">
											<el-select v-model="info.xmStage" placeholder="所属阶段">
												<el-option v-for="item in list" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</div>
									</div>
								</div>


								<div class="subli">
									<div class="subli_left">
										<label class="subl">执行人</label>
										<div class="input-cont">
											<el-autocomplete popper-class="my-autocomplete" :trigger-on-focus="false"
												v-model="completeName" value-key="realName"
												:fetch-suggestions="querySearch_u" placeholder="请选择执行人"
												@select="handleSelect_u2">
												<template slot-scope="{ item }">
													<div class="tab_tr">
														<div class="tab_td">{{ item.userName }}</div>
														<div class="tab_td">{{ item.realName }}</div>
														<div class="tab_td">{{ item.departName }}</div>
														<div class="tab_td">{{ item.phoneNo }}</div>
													</div>

												</template>
											</el-autocomplete>
											<span class="iconfont icon-list"
												@click="utype='addzx';openuseralert()"></span>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">审批人</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="cnames" readonly
												placeholder="请选择审批人">
											<span class="iconfont icon-list"
												@click="utype='addsp';openuseralert2()"></span>
										</div>
									</div>
								</div>

								<div class="subli">
									<div class="sublia">
										<label class="subl">任务描述</label>
										<div class="input-cont">
											<textarea name="" v-model="info.rwDescripton" id=""
												placeholder="请输入任务描述"></textarea>
										</div>
									</div>
								</div>

								<div class="subli" style="align-items: flex-start;">
									<label class="subl">附件上传</label>
									<div class="check_li_r">
										<el-upload class="upload-demo" ref="upload" :data="{project:'rw'}"
											:headers="{'Authorization':token}" :action="$url+'/file/upload'"
											:show-file-list="false" :file-list="fileList3" :before-upload="beforeUpload"
											:on-success="uploadsuc3" :multiple="true" :auto-upload="true">
											<div class="upload_btn">
												<img src="@/assets/images/upload.png" alt="">点击上传
											</div>
										</el-upload>
										<div class="upload_list">
											<div class="up_li" v-for="item,index in files3">
												<div class="file_name">
													<div class="file_name_left"><img src="@/assets/images/upload.png"
															alt="">{{item}}
													</div>
													<div class="file_name_right">
														<div class="file_check" @click="check_file($url + item)">查看
														</div>
														<div class="file_del" @click="del_file3(index)">
															删除
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>


							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="showData">确定</button>
							<button class="btn btn-info close_eng" @click="closerw">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 新增阶段 -->
		<div class="alzzc" v-if="addshow">
			<div class="del_alert" style="width: 600px;height: 400px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>{{jdinfo.id?"编辑阶段":'新增阶段'}}
					<div class="right" @click="jdinfo={num:2};addshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					<div class="line">
						<div class="line_title"><span>*</span>名称：</div>
						<input type="text" v-model="jdinfo.name" class="form-control">
					</div>
					<div class="line sel">
						<div class="line_title">排序：</div>
						<el-select v-model="jdinfo.compare" placeholder="阶段">
							<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-radio name='num' v-model="jdinfo.num" :label="1">前</el-radio>
						<el-radio name='num' v-model="jdinfo.num" :label="2">后</el-radio>
					</div>
					<div class="line">
						<div class="line_title">说明：</div>
						<textarea name="" id="" maxlength="200" v-model="jdinfo.remark"></textarea>
					</div>
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="addpeo">确认</div>
					<div class="alert_close" @click="jdinfo.name='';jdinfo.remark='';addshow=false">取消</div>
				</div>
			</div>
		</div>

		<div class="alzzc" v-if="delshow">
			<div class="del_alert" style="height: 200px;">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>删除阶段
					<div class="right" @click="id='';delshow=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">
					确定删除该阶段？
				</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="delpeo">确认</div>
					<div class="alert_close" @click="id='';delshow=false">取消</div>
				</div>
			</div>
		</div>
		<!--选择添加工程师-->
		<div :class="alert_show?'modal in fade':'modal fade'" role="dialog"
			:style="alert_show?' align-items: center;justify-content: center;display: flex;z-index:200':''"
			id="engineer">

			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">

						<div class="modal-header tit">
							<em></em>选择用户
							<div class="right" @click="closealert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100" style="height:760px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo2" class="ztree" @select="choseroom_user"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word_users=word_user;getalluserlist()"
											v-model="word_user" placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word_users=word_user;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>
								<div class="txt-black">为您找到{{inglen2}}位 <span class="txt-blue">用户</span> </div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;overflow-y: auto;">
										<h2 class="tcent" v-if="cuserlist.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th><input type="checkbox" @change="changeall2" v-model="choseall2"
														name="allt" id="tuser"><label for="tuser"></label></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in cuserlist">
												<td>
													<input type="checkbox" v-model="item.chosesf" @change="chosechange2"
														name="chose2" :id="'tuser'+item.id"><label
														:for="'tuser'+item.id"></label>
												</td>
												<td>{{item.userName }}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>

									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="cusers">确定</button>&emsp;
										<button class="btn btn-default" @click="closealert()">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--报修人-->
		<div :class="user_alert?'modal in fade':'modal fade'" role="dialog"
			:style="user_alert?' align-items: center;justify-content: center;display: flex;z-index:200;':'z-index:200'"
			id="engineer">

			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">
						<div class="modal-header tit">
							<em></em>选择用户
							<div class="right" @click="closeusertalert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100"
							style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">

							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo4" class="ztree" @select="choseroom_user"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word_users=word_user;getalluserlist()"
											v-model="word_user" placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word_users=word_user;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;">
										<h2 class="tcent" v-if="user_all.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in user_all">
												<td>
													<input type="radio" v-model="userid" :value="item.id"
														@change="changechose(item.id,item.realName,item.phoneNo)"
														name="chose2" :id="'c'+item.id"><label
														:for="'c'+item.id"></label>
												</td>
												<td>{{item.userName}}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" :page-count="num2" layout="prev, pager, next">
										</el-pagination>
									</div>


									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="sure_user">确定</button>&emsp;
										<button class="btn btn-default" @click="closeusertalert">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">

	export default {
		name: "",
		data() {
			return {
				act: 0,
				page: 1,
				types: [],
				jdinfo:{compare:'',num:2},
				list: [],
				leftlist: [],
				inglen: 0,
				limit: 10,
				info:{},
				userid:"",
				xmStage:"",
				apname:"",
				ppname:"",
				mbid:"",
				zxname:"",
				spname:"",
				cuserlist: [],
				zNodes_u: [],
				ztree_obj_u: {},
				treeClickCount4: 0,
				setting_u: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom_user
					}
				},
				page2: 1,
				inglen2: 0,
				limit2: 10,
				num2: 1,
				user_alert: false,
				showmbadd: false,
				alert_show: false,
				fileList3:[],
				files3id:[],
				files2id:[],
				files3:[],
				files2:[],
				uid: sessionStorage.getItem('uid'),
				token: sessionStorage.getItem('token'),
				user_all:[],
				user_c:[],
				user_c2:[],
				cname:[],
				cname2:[],
				cnames:"",
				cnames2:"",
				createName:"",
				toId:"",
				completeName:"",
				word_user:"",
				did:"",
				word_users:"",
				utype:"",
				id:"",
				
				showadd: false,
				showloading: false,
				delshow: false,
				showzzc: false,
				delmb: false,
				addshow:false,
				delrwshow:false
			}
		},
		components: {},

		mounted() {
			this.getleftlist();
			this.gettype();
		},

		methods: {
			openaddjd(){
				if(this.list.length > 0){
					this.jdinfo.compare=this.list[this.list.length-1].id;
				}
				this.addshow=true
			},
			edit(index,index2){
				this.type = 'edit'
			
				var that = this
				this.$http.get(this.$url + '/rw/template/selectOne?type=2&id='+this.list[index].arr[index2].id)
					.then(function(response) {
						that.info = {
							id :response.data.data.id,
							rwName :response.data.data.rwName,
							rwDescripton :response.data.data.rwDescripton,
							xmStage :response.data.data.xmStage,
							completeId :response.data.data.completeId,
							agreeIds :response.data.data.agreeIds?response.data.data.agreeIds.split(','):[],
							fileIds :response.data.data.fileIds?response.data.data.fileIds.split(','):[],
						}
						that.user_c = response.data.data.agreeIds?response.data.data.agreeIds.split(','):[]
						that.cnames = []
						if(response.data.data.agreeUsers){
							for (var i = 0; i < response.data.data.agreeUsers.length; i++) {
								that.cnames.push(response.data.data.agreeUsers[i].realName)
							}
						}
						
						that.completeName = response.data.data.compleTeName
						that.files3 = []
						that.files3id = []
						if(response.data.data.fileList){
							for (var i = 0; i < response.data.data.fileList.length; i++) {
								that.files3.push(response.data.data.fileList[i].relativePath)
								that.files3id.push(response.data.data.fileList[i].id)
							}
						}
						
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
				
				this.showadd = true
			},
			opendown(i){
				this.list[i].open=!this.list[i].open
				this.$forceUpdate()
			},
			editjd(i){
				
				var param = {
					id:this.list[i].id
				}
				var that = this
				this.$http.post(this.$url + '/xm/template/stage/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						// that.$Toast(response.data.msg);
						response.data.data.num = response.data.data.num?response.data.data.num:''
						that.jdinfo={
							id:response.data.data.id,
							name:response.data.data.name,
							xmTemplateId:response.data.data.xmTemplateId,
							remark:response.data.data.remark,
							compare:response.data.data.afterId,
							num:response.data.data.afterId?1:'',
						} 
						that.addshow=true
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			addpeo() {
				if (!this.jdinfo.name || this.jdinfo.name.trim() == '') {
					this.$Toast("请填写必填选项");
					return
				}
				
				this.showloading = true
				var that = this
				this.jdinfo.xmTemplateId = this.leftlist[this.act].id
				this.jdinfo.compare = this.jdinfo.compare?this.jdinfo.compare:0
				var param = this.jdinfo
				this.$http.post(this.$url + '/xm/template/stage/save', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.addshow = false
						that.jdinfo={num:2}
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delrw(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.id
				}
				this.$http.post(this.$url + '/xm/template/stage/rw/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delrwshow = false
						that.id = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delpeo(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.id
				}
				this.$http.post(this.$url + '/xm/template/stage/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delshow = false
						that.id = ''
						that.getlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			delmodel(){
				this.showloading = true
				var that = this
				var param = {
					ids: this.mbid
				}
				this.$http.post(this.$url + '/xm/template/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.delmb = false
						that.act = 0
						that.mbid = ''
						that.getleftlist()
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			addmb() {
				this.showloading = true
				var that = this
				var param = {
					id:this.mbid,
					name:this.ppname
				}
				this.$http.post(this.$url + '/xm/template/save', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.getleftlist()
						that.$forceUpdate()
						that.showloading = false
						that.showmbadd = false
						that.ppname = ''
						that.mbid = ''
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						console.log(error);
					});
			},
			// 获取部门
			gettype() {
				this.showloading = true
			
				var that = this
				this.$http.get(this.$url + '/sys/dept/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.types = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
			
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
		
			handleCurrentChange2(val) {
				   console.log(`当前页: ${val}`);
				 					this.page2 = val
				 					this.getalluserlist()
			},
				 // 科室树状图选择
			choseroom_user(data, node, treeNode) {
				 	this.treeClickCount4++;
				 	if (this.treeClickCount4 >= 2) {
				 		return;
					}
					this.timer = window.setTimeout(() => {
				 		if (this.treeClickCount4 == 1) {
				 			this.treeClickCount4 = 0;
				 			console.log('单击事件,可在此处理对应逻辑')
				 				
				 					this.did = treeNode.id
				 				this.page2=1
				 				this.getalluserlist()
				 			
				 		} else if (this.treeClickCount4 > 1) {
				 			this.treeClickCount4 = 0;
				 			
				 			this.ztree_obj_u.cancelSelectedNode();
				 			console.log('双击事件,可在此处理对应逻辑')
				 		}
				 	}, 300);
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo"), that.setting, that.zNodes);
						var  nodes = that.ztree_obj.getNodes();
						for  ( var  i = 0; i < nodes.length; i++) {  //设置节点展开
					   that.ztree_obj.expandNode(nodes[i],  true ,  false ,  true );
						}
						that.zNodes_u = response.data.data
						that.ztree_obj_u = $.fn.zTree.init($("#treeDemo4"), that.setting_u, that.zNodes_u);
						that.ztree_obj_u = $.fn.zTree.init($("#treeDemo2"), that.setting_u, that.zNodes_u);
					var  nodes = that.ztree_obj_u.getNodes();
						for  ( var  i = 0; i < nodes.length; i++) {  //设置节点展开
					   that.ztree_obj_u.expandNode(nodes[i],  true ,  false ,  true );
						}
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			sure_user(){
				
				this.user_alert = false
				if(this.utype == 'zj'){
					this.sure_eng()
				}
			},
			closerw(){
				this.xmStage='';
				this.completeName='';
				this.files3=[];
				this.files3id=[];
				this.user_c=[];
				this.cnames='';
				this.info={};
				this.showadd=false;
			},
			// 表单提交
			showData(type) {				
				this.info.rwName = this.info.rwName?this.info.rwName:''
				// this.info.createId  = this.uid
				this.info.completeId = this.info.completeId?this.info.completeId:''
				this.info.agreeIds = this.user_c.length>0?this.user_c.join(','):''
				this.info.rwDescripton = this.info.rwDescripton?this.info.rwDescripton:''
				if(!this.xmStage && !this.info.xmStage){
					this.$Toast("请选择所属阶段");
					return
				}
				if(this.xmStage){
					this.info.xmStage = this.xmStage
				}
				
				// if (this.info.rwName.trim() == '' ||  this.info.completeId == '' ||this.info.agreeIds == ''  ) {
				// 	this.$Toast("请填写必填选项");
				// 	return
				// }
				
				
				this.info.fileIds = this.files3id.length>0?this.files3id.join(','):''
				console.log(this.info)
				
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/template/stage/rw/save', this.$qs.stringify(this.info))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.showadd = false
						that.showloading = false
						that.xmStage = ''
						that.info={}
						that.completeName='';
						that.files3=[];
						that.files3id=[];
						that.user_c=[];
						that.cnames='';
						that.getlist()
						that.$forceUpdate()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			handleSelect_u2(item,type) {
				 	console.log(item)
				 	console.log(type)
				 	if(!item.id){
				 		this.info.completeId=''
				 		return 
				 	}
				 	this.info.completeName = item.realName
				 	this.info.completeId = item.id				
				 	if(type){
				 		this.showData('check')
				 	}
				 },
				 
				 querySearch_u(queryString, cb) {
				 	var that = this
				 	var name = this.completeName?this.completeName:''
				 	// var id = this.info.departId?this.info.departId:''
				 	var url = encodeURI(this.$url + '/sys/user/select?realName='+name)
				 	this.$http.get(url)
				 		.then(function(response) {
				 			if (response.data.code == '1410') {
				 				that.$Toast(response.data.msg);
				 				sessionStorage.setItem('token', '')
				 				that.$router.push('/login')
				 				return
				 			}
				 			that.restaurants_u = response.data.data
				 			that.restaurants_u.unshift({userName:"账号",realName:"姓名",departName:"科室",phoneNo:"电话"})
				 			var restaurants_u = that.restaurants_u;
				 			var results = queryString ? restaurants_u.filter(that.createFilter_u(queryString)) : restaurants_u;
				 			// 调用 callback 返回建议列表的数据
				 			if(results.length == 0){
				 				results.unshift({userName:"暂无内容",realName:"",departName:"",phoneNo:""})
				 			}else{
				 				if(results[0].id){
				 					results.unshift({userName:"账号",realName:"姓名",departName:"科室",phoneNo:"电话"})
				 				}
				 			}
				 			
				 			cb(results);
				 			// console.log(that.restaurants)
				 		})
				 		.catch(function(error) {
				 			console.log(error);						
				 			that.$Toast('网络拥堵，刷新一下');
				 		});
				 		
				   
				 },
				 createFilter_u(queryString) {
				 	return (restaurant) => {
				 		// if(restaurant.realName){
				 			return (restaurant.realName.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
				 		// }
				 	};
				 },
				 changechose(id,name,tel){
				 	if(this.utype == 'ap'){
				 		this.apname = name
				 		this.createId = id
				 	}else if(this.utype == 'zx'){
				 		this.zxname = name
				 		this.completeId = id
				 	}else if(this.utype == 'sp'){
				 		this.spname = name
				 		this.agreeIds = id
				 	}else if(this.utype == 'addap'){
				 		this.createName = name
				 		this.info.createId = id
				 	}else if(this.utype == 'addzx'){
				 		this.completeName = name
				 		this.info.completeId = id
				 	}else if(this.utype == 'zj'){
				 		this.engid = id
				 	}
				 },
				 // 获取弹窗里的用户
				 getalluserlist() {
				 	this.choseall2 = false
				 	var id = this.did?this.did:''
				 	var that = this
				 	var url = encodeURI(this.$url + '/sys/user/list?page='+this.page2+'&limit='+this.limit2+'&deptId='+id+'&userName='+this.word_users)
				 	this.$http.get(url)
				 		.then(function(response) {
				 			if (response.data.code == '1410') {
				 				that.$Toast(response.data.msg);
				 				sessionStorage.setItem('token', '')
				 				that.$router.push('/login')
				 				return
				 			}
				 			that.user_all = response.data.data.records
				 			that.cuserlist = response.data.data.records
				 			for (var i = 0; i < that.user_all.length; i++) {
				 				that.user_all[i].id = window.atob(that.user_all[i].id)
				 				that.cuserlist[i].id = that.user_all[i].id
				 			}
				 			if(that.utype == 'addsp'){
				 				var a = 0
				 				console.log(that.user_c)
				 				for (var i = 0; i < that.cuserlist.length; i++) {
				 					
				 					
				 					if(that.user_c.indexOf(that.cuserlist[i].id) > -1){
				 						a++
				 						that.cuserlist[i].chosesf = true
				 					}else{
				 						that.cuserlist[i].chosesf = false
				 					}
				 				}
				 				
				 			}else if(that.utype == 'addcs'){
				 				var a = 0
				 				console.log(that.user_c2)
				 				for (var i = 0; i < that.cuserlist.length; i++) {
				 					if(that.user_c2.indexOf(that.cuserlist[i].id) > -1){
				 						a++
				 						that.cuserlist[i].chosesf = true
				 					}else{
				 						that.cuserlist[i].chosesf = false
				 					}
				 				}
				 			}
				 			if(a == that.cuserlist.length){
				 				that.choseall2=true
				 			}else{
				 				that.choseall2=false
				 			}
				 			that.inglen2 = response.data.data.total
				 			if (that.inglen2 > that.limit2) {
				 				that.num2 = response.data.data.pages
				 			} else {
				 				that.num2 = 1
				 			}
				 		})
				 		.catch(function(error) {
				 			console.log(error);
				 			// sessionStorage.setItem('token','undefined')
				 			// that.$router.push('/login')
				 		});
				 },
				 openuseralert(){
				 	this.page2 = 1
				 	this.username = ''
				 	this.principalId = ''
				 	this.word_user = ''
				 	this.did = ''
				 	this.userid = ''
				 	this.uphone = ''
				 	// this.ztree_obj_u.cancelSelectedNode();
				 	this.getrooms()
				 	this.getalluserlist()
				 	this.user_alert = true
				 },
				 openuseralert2(){
				 	console.log(this.user_c)
				 	console.log(this.user_c2)
				 	this.getrooms()
				 	this.page2 = 1
				 	this.getalluserlist()
				 	this.alert_show = true
				 	this.$forceUpdate()
				 },
				 beforeUpload(e){
				 	this.showloading=true
				 	const fd = new FormData();
				 	 fd.append("file", e);
				 	 fd.append("project", 'rw');
				 	 fd.append("secret", this.$md5(e.name + 'gd' + e.size));
				 	
				 	var that = this
				 	this.$http.post(this.$url + '/file/upload', fd, {
				 			headers: {
				 				'Content-Type': 'multipart/form-data; boundary=something'
				 			}
				 		})
				 		.then(function(response) {
				 			if (response.data.code == '1410') {
				 				that.$Toast(response.data.msg);
				 				sessionStorage.setItem('token', '')
				 				that.$router.push('/login')
				 				return
				 			}
				 			// that.files3.push(response.data.data.relativePath)
				 			// that.files3.push({relativePath:response.data.data.relativePath,name:response.data.data.name})
				 			// that.files3id.push(response.data.data.id)
				 			if(response.data.code != 0){
				 				that.$Toast(response.data.msg)
				 				that.showloading=false
				 				return
				 			}
				 			 that.files3.push(response.data.data.relativePath)
				 			 that.files3id.push(response.data.data.id)
				 			 that.showloading=false
				 			 if(that.check == 1){
				 			 	that.showData('check')
				 			 }
				 		})
				 		.catch(function(error) {
				 			console.log(error);
				 		});
				 		
				 	return false
				 },
				 del_file3(i){
				 	var that = this
				 	var param = {fileId:this.files3id[i]}
				 	this.$http.post(this.$url + '/main/delete/file', this.$qs.stringify(param))
				 		.then(function(response) {
				 			console.log(response)
				 				that.files3.splice(i,1)
				 				that.files3id.splice(i,1)
				 			that.fileList3.splice(i,1)
				 			if(that.check == 1){
				 				that.showData('check')
				 			}
				 		})
				 		.catch(function(error) {
				 			console.log(error);
				 			
				 			that.$Toast('网络拥堵，刷新一下');
				 		});
				 },
				 check_file(url){
				 		   window.open(url, '_blank');
				 },
				 uploadsuc3(file, fileList){
				 	if(file.code != 0){
				 		this.$Toast(file.msg)
				 		this.showloading=false
				 		return
				 	}
				 	 this.files3.push(file.data.relativePath)
				 	 this.files3id.push(file.data.id)
				 	 this.showloading=false
				 	 if(this.check == 1){
				 	 	this.showData('check')
				 	 }
				 },
				 closeusertalert(){
				 	this.user_alert = false
				 	this.username = ''
				 	this.principalId = ''
				 	this.word_user = ''
				 	this.did = ''
				 	this.userid = ''
				 	this.uphone = ''
				 	this.ztree_obj_u.cancelSelectedNode();
				 	this.getrooms()
				 	this.getalluserlist()
				 },
				 handleSelect_u(item) {
				 	if(!item.id){
				 		this.info.createName=''
				 		return 
				 	}
				 	this.info.createName = item.realName
				 	this.info.createId = item.id				
				 },
				 cusers(){
				 	
				 	if(this.utype == 'addsp'){
				 		this.cnames = this.cname.join(',')
				 	}else if(this.utype == 'addcs'){
				 		this.cnames2 = this.cname2.join(',')
				 	}
				 	if(this.check == 1){
				 		this.showData('check')
				 	}
				 	
				 	this.alert_show=false
				 	this.word_user = ''
				 	this.word_users = ''
				 	this.deptId = ''
				 	this.getrooms()
				 	this.did = ''
				 	this.ztree_obj_u.cancelSelectedNode();
				 	this.getalluserlist()
				 },
				 
				 closealert(){
				 	
				 	this.choseall2=false
				 	this.alert_show=false;
				 	// this.user_c = []
				 	// this.cname = []
				 	// this.cnames = []
				 	this.word_user = ''
				 	this.word_users = ''
				 	this.deptId = ''
				 	this.did = ''
				 	this.getrooms()
				 	this.ztree_obj_u.cancelSelectedNode();
				 	this.getalluserlist()
				 },
				 chosechange2(){
				 	var a = 0
				 	for (var i = 0; i < this.cuserlist.length; i++) {
				 		if(this.cuserlist[i].chosesf == true){
				 			a++
				 			if(this.utype == 'addsp'){
				 				this.user_c.push(this.cuserlist[i].id)
				 				this.cname.push(this.cuserlist[i].realName)
				 				this.user_c = this.user_c.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 				this.cname = this.cname.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 			}else if(this.utype == 'addcs'){
				 				this.user_c2.push(this.cuserlist[i].id)
				 				this.cname2.push(this.cuserlist[i].realName)
				 				this.user_c2 = this.user_c2.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 				this.cname2 = this.cname2.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 			}
				 			
				 		}else{
				 			if(this.utype == 'addsp'){
				 				if(this.cname.indexOf(this.cuserlist[i].realName) > -1){
				 					this.cname.splice(this.cname.indexOf(this.cuserlist[i].realName),1)
				 				}
				 				if(this.user_c.indexOf(this.cuserlist[i].id) > -1){
				 					this.user_c.splice(this.user_c.indexOf(this.cuserlist[i].id),1)
				 				}
				 			}else if(this.utype == 'addcs'){
				 				if(this.cname2.indexOf(this.cuserlist[i].realName) > -1){
				 					this.cname2.splice(this.cname2.indexOf(this.cuserlist[i].realName),1)
				 				}
				 				if(this.user_c2.indexOf(this.cuserlist[i].id) > -1){
				 					this.user_c2.splice(this.user_c2.indexOf(this.cuserlist[i].id),1)
				 				}
				 			}
				 		}
				 		
				 	}
				 	if(a == this.cuserlist.length){
				 		this.choseall2=true
				 	}else{
				 		this.choseall2=false
				 	}
				 	this.$forceUpdate()
				 	// if(this.check == 1){
				 	// 	this.showData('check')
				 	// }
				 },
				 changeall2(){
				 	console.log(this.utype)
				 	if(this.choseall2){
				 		for (var i = 0; i < this.cuserlist.length; i++) {
				 			this.cuserlist[i].chosesf = true
				 			if(this.utype == 'addsp'){
				 				this.user_c.push(this.cuserlist[i].id)
				 				this.cname.push(this.cuserlist[i].realName)
				 				console.log(this.cname)
				 				this.user_c = this.user_c.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 				this.cname = this.cname.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 			}else if(this.utype == 'addcs'){
				 				this.user_c2.push(this.cuserlist[i].id)
				 				this.cname2.push(this.cuserlist[i].realName)
				 				this.user_c2 = this.user_c2.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 				this.cname2 = this.cname2.filter((item, index, array) => {
				 				  return array.indexOf(item) === index
				 				})
				 			}
				 		}
				 	}else{
				 		
				 			for (var i = 0; i < this.cuserlist.length; i++) {
				 				this.cuserlist[i].chosesf = false
				 				if(this.utype == 'addsp'){
				 					this.user_c.splice(this.user_c.indexOf(this.cuserlist[i].id),1)
				 					this.cname.splice(this.cname.indexOf(this.cuserlist[i].realName),1)
				 				}else if(this.utype == 'addcs'){
				 						this.user_c2.splice(this.user_c2.indexOf(this.cuserlist[i].id),1)
				 						this.cname2.splice(this.cname2.indexOf(this.cuserlist[i].realName),1)
				 				}
				 			}
				 		}
				 		if(this.check == 1){
				 			this.showData('check')
				 		}
				 		this.$forceUpdate()
				 },
				 chose(i) {
				 	this.act = i
					this.list = []
				 	this.getlist()
				 },
			getleftlist() {
				this.showloading = true
				var that = this
				this.$http.get(this.$url + '/xm/template/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.leftlist = response.data.data
						if(that.leftlist.length >0){
							that.getlist()
						}
						
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getrwlist(id,i){
				var that = this
				var param ={
						xmTemplateStageId:id
					}
				
				that.$http.post(that.$url + '/xm/template/stage/rw/select', that.$qs.stringify(param))
					.then(function(response2) {
				
						// console.log(response.data.data)
						console.log(that.list)
						that.list[i].arr = response2.data.data?response2.data.data:[]
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getlist() {
				this.showloading = true
				var param ={
						xmTemplateId:this.leftlist[this.act].id
					}
				var that = this
				this.$http.post(this.$url + '/xm/template/stage/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						if(response.data.data){
							for (var i = 0; i < response.data.data.length; i++) {
								response.data.data[i].arr=[]
								response.data.data[i].open = true
								var id = response.data.data[i].id
								that.list = response.data.data?response.data.data:[],
								that.list[i].arr = []
								that.getrwlist(id,i)
								
							}
						}else{
							that.list = response.data.data?response.data.data:[]
						}
						
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.fr {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20px;
	}

	.rwlist_r {
		display: flex;
	}

	.cur {
		color: #dcdcdc;
		margin-right: 10px;
	}

	.rwlist_l {
		display: flex;
		color: #626262;

		font-size: 14px;
	}

	.list_btn_del2 {
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
	}

	.rwlist {
		/* width: 1342px; */
		height: 52px;
		background: #F5F5F5;
		border-radius: 3px;
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px
	}

	.up {
		margin-left: 9px;
		transition: all .3s;
	}

	.list_btn_edit {

		color: #4286F5;
		background: #EFF4FC;
	}

	.list_btn_add {

		background: #ECF5ED;
		color: #32B16C;
	}

	.list_btn_del {

		color: #555555;
		background: #F2F2F2;
	}

	.list_title_r {
		display: flex;
	}

	.list_btns img {
		width: 14px;
		margin-right: 3px;
	}

	.list_btns {
		width: 63px;
		height: 28px;
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin-left: 9px;
		cursor: pointer;
	}

	.list_title_l strong {
		margin-left: 5px;
	}

	.list_title_l span {
		min-width: 23px;
		padding: 0 5px;
		height: 23px;
		background: #32B16C;
		border-radius: 50%;
		font-size: 17px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #fff;
	}

	.list_title_l {

		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: bolder;
		color: #32B16C;
	}

	.list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.sublia {
		display: flex;

	}

	.smadd_btn {
		background: #00A0E9;
		margin-left: 14px;
	}

	.subli textarea {
		width: 673px;
		height: 224px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		outline: none;
		padding: 10px 10px;
	}

	/* .subli /deep/ .el-date-editor--date .el-input__inner,
	.subli /deep/ .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 271px !important;
	}
 */
	.subli /deep/ .el-input {
		width: 271px !important;
	}

	.subl {
		width: 88px;
		text-align: right;
		margin-right: 17px;
		/* white-space: nowrap; */
	}

	.subli /deep/ .el-input__prefix,
	.task_r /deep/ .el-input__prefix {
		right: 5px;
		left: auto;
		width: 25px;
	}

	.subli input,
	.subli .el-select {
		width: 271px;
		margin-left: 0;
	}

	.subli /deep/ .el-input__inner {
		height: 34px;
	}

	.subli label {
		margin-bottom: 0;
	}

	.sublist {
		padding-top: 15px;
	}

	.subli_left {
		display: flex;
		align-items: center;
		width: 50%;
	}

	.subli {
		display: flex;
		align-items: center;
		color: #000;
		margin-bottom: 15px;
		justify-content: space-between;
	}

	.sel .el-radio {
		margin-bottom: 0;
		display: flex;
		align-items: center;
	}

	.alert_info /deep/ .el-radio__label {
		font-size: 16px;
		color: #333;
	}

	.line .el-select /deep/ .el-input__inner {
		width: 230px;
	}

	.line /deep/ .el-select {
		margin-right: 20px;
	}

	textarea {
		padding: 0 10px;
		outline: none;
	}

	.line textarea {
		border: 1px solid #ccc;
	}

	.xmright {
		background: #fff;
		width: 100%;
		/* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); */
		padding: 10px 20px;
		margin-top: 2px;
	}

	.xmname {
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.act .per_cur,
	.act .per_li_r {
		background-color: #4286F5;
	}

	.act .per_li_l {
		color: #4286F5;
	}

	.per_li_l img {
		margin-right: 14px;
	}

	.act {
		background-color: #f0f4fd;
	}

	.per_li_r {
		width: 17px;
		height: 4px;
		border-radius: 4px;
		background: #ccc;
	}

	.perr img {
		width: 12px;
		margin-left: 10px;
	}

	.perr {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.per_li {
		padding: 0 26px;
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #000000;
		cursor: pointer;
	}

	.per_li_l {
		display: flex;
		width: 70%;
		align-items: center;
	}



	.per_title img {
		width: 17px;
	}

	.per_title_left img {
		width: 3px;
		margin-right: 8px;
	}

	.per_title_left {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #000000;
	}

	.per_title {
		width: 100%;
		height: 45px;
		background: #FFFFFF;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
	}

	.per_left {
		min-width: 227px;
		max-width: 250px;
		/* background: #f8f8f8; */
		height: calc(100vh - 132px);
		/* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); */
		border-right: 1px solid #eee;

		margin-top: 20px;
	}

	.flexbox {
		display: flex;
		align-items: stretch;

	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
		cursor: pointer;
	}

	.w600 .modal-body.h100 {
		height: 170px;
		overflow: visible;
	}

	.line textarea {
		height: 75px;
	}

	/* 
	.line select {
		width: 200px;
	}
 */
	/* .line input, */
	.line textarea {
		width: 360px;
		color: #000;
	}

	.line_title span {
		color: #E65100;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
		width: 54px;
		text-align: right;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 165px) auto;
	}

	.tcent {
		text-align: center;
	}


	.search_inp {
		width: 255px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}



	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}

	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}

	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		overflow: visible;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
